<template>
  <div>
    <div class="bar">
        <div class="demonstration">反光度</div>
        <div class="demonstration">高</div>
        <div class="block">
            <el-slider v-model="value1"></el-slider>
        </div>
        <div class="demonstration">低</div>
    </div>
    <div class="bar">
        <div class="demonstration">肌理</div>
        <div class="demonstration">高</div>
        <div class="block">
            <el-slider v-model="value2"></el-slider>
        </div>
        <div class="demonstration">低</div>
    </div>

  </div>
</template>
  
  <script >
export default {
  data() {
    return {
      value1: 50,
      value2: 50,
    };
  },
  methods: {
    formatTooltip(val) {
      return val / 100;
    },
  },
};
</script>

<style scoped>
.block{
    /* flex: 3.5; */
    width: 150px;
    margin-left: 10px;
    /* display: flex; */
}
.demonstration{
    font-size: 15px;
    /* text-align: center; */
    margin: auto;
}
.bar{
    display: flex;
    width: 260px;
}
</style>